<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData" label-width="100px" label-position="right" >
      <el-form-item label="充电桩编号">
        <el-input @change="searchChange" v-model="formData.code" placeholder="充电桩编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="外壳编码">
        <el-input @change="searchChange" v-model="formData.shellId" placeholder="充电桩外壳编码" clearable></el-input>
      </el-form-item>
      <el-form-item label="片区名称">
        <el-input @change="searchChange" placeholder="片区名称" v-model="formData.chargingGroupName" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户手机号">
        <el-input @change="searchChange" placeholder="用户手机号" v-model="formData.mobile" clearable></el-input>
      </el-form-item>
      <el-form-item label="充电状态">
        <el-select v-model="formData.chargingStatus" @change="searchChange" clearable>
          <el-option v-for="(item, index) in chargingStatusList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input @change="searchChange" placeholder="订单编号" v-model="formData.orderNumber" clearable></el-input>
      </el-form-item>
      <el-form-item label="充电始/束">
        <el-date-picker
          v-model="formData.createDate"
          @change="searchChange"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          :picker-options="pickerOptions"
          end-placeholder="结束日期" :default-time="['00:00:00','23:59:59']" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>订单金额：{{totalOrderAmount}}</div>
      <div>订单数量：{{totalOrderCount}}</div>
      <div>消耗电量：{{totalChargingElec}}</div>
      <div>退款金额总计：{{totalRefundAmount}}</div>
    </div>
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :table-loading="dataListLoading"
               :option="tableOption"
               @size-change="sizeChange"
               @current-change="currentChange">
      <template slot-scope="scope" slot="info">
        <div class="cell">
          <div>订单编号：<span>{{scope.row.orderNumber}}</span></div>
          <div>充电开始时间：<span>{{scope.row.createDate}}</span></div>
          <div>实际结束时间：<span>{{scope.row.endDate}}</span></div>
          <div>下发时间：<span>{{scope.row.totalChargingTime}}</span></div>
          <div>实际充电时长：<span>{{scope.row.chargingTime}}(分钟)</span></div>
          <div>下发电量：<span>{{scope.row.totalChargingElec}}</span></div>
          <div>消耗电量：<span>{{scope.row.chargingElec}}</span></div>
          <div>下单用户手机号：<span>{{scope.row.mobile}}</span></div>
          <div>所属运营商：<span>{{scope.row.merchantName}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="districtInfo">
        <div class="cell">
          <div>片区名称：<span>{{scope.row.chargingGroupName}}</span></div>
          <div>充电桩编号：<span>{{scope.row.code}}</span></div>
          <div>插座编号：<span>{{scope.row.socketCode}}</span></div>
          <div>外壳编号：<span>{{scope.row.shellId}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="consumeInfo">
        <div class="cell">
          <div>应付金额：<span>{{scope.row.amount}}</span></div>
          <div>实际支付金额：<span>{{scope.row.actualAmount}}</span></div>
          <div>消费方式：<span>{{scope.row.billingMethod}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="chargeMode">
        <div class="cell" v-if="scope.row.status == 4">
          <el-button type="infor" size="small" @click="showChargingRule_click(scope.row.chargingRuleVo)">查看计费规则</el-button>
        </div>
      </template>
      <template slot-scope="scope" slot="refundInfo">
        <div class="cell">
          <div>是否退过款：<span>{{scope.row.isRefund == 0?'否':'是'}}</span></div>
          <div>订单实际支付金额：<span>{{scope.row.actualAmount}}</span></div>
          <div>退款金额：<span>{{scope.row.refundAmount}}</span></div>
          <div>退款原因：<span>{{scope.row.refundReason}}</span></div>
        </div>
      </template>
      <template slot-scope="scope"
                slot="menu">
        <el-button type="primary"
                   size="small"
                   @click.stop="power_Click(scope.row.orderNumber)">功率图</el-button>
        <el-button v-if="scope.row.status==4&&scope.row.isRefund==0" style="margin-top: 5px" type="primary" size="small" @click.stop="refund_Click(scope.row)">退款</el-button>
      </template>
    </avue-crud>
    <power-diagram ref="powerDiagram" v-if="showPowerDiagram"></power-diagram>
    <order-refund ref="orderRefund" @refreshDataList="getDataList(page,formData)"></order-refund>
    <charging-rule-detail ref="chargingRuleDetail" v-if="showChargingRuleDetail"></charging-rule-detail>
  </div>
</template>

<script>
  import '@/utils/public'
  import { tableOption } from '@/crud/order/carOrderList'
  import powerDiagram from './powerDiagram'
  import orderRefund from './orderRefund'
  import chargingRuleDetail from './chargingRuleDetail'
  export default {
    components: {
      powerDiagram,
      orderRefund,
      chargingRuleDetail
    },
    data () {
      let nowDate = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1); //当前日期
      let nowMonth = nowDate.getMonth(); //当前月
      let nowYear = nowDate.getFullYear(); //当前年
      //本月的开始时间
      let monthStartDate = new Date(nowYear, nowMonth, 1);
      return {
        dataList: [],
        dataListLoading: false,
        showPowerDiagram: false,
        showOrderRefund: false,
        tableOption: tableOption,
        showChargingRuleDetail:false,
        formData: {
          code: '',
          shellId: '',
          chargingGroupName: '',
          mobile: '',
          chargingStatus: '',
          orderNumber: '',
          chargingStartTime:monthStartDate.format('yyyy-MM-dd hh:mm:ss'),
          chargingEndTime:nowDate.format('yyyy-MM-dd hh:mm:ss'),
          createDate:[monthStartDate.format('yyyy-MM-dd hh:mm:ss'),nowDate.format('yyyy-MM-dd hh:mm:ss')],
          orderType: 1
        },
        chargingStatusList: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '预充电',
            value: '0'
          },
          {
            label: '正在充电',
            value: '1'
          },
          {
            label: '未打开充电桩',
            value: '2'
          },
          {
            label: '充电失败',
            value: '3'
          },
          {
            label: '充电结束',
            value: '4'
          }
        ],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        options: [],
        props: {
          multiple: false,
          label: 'name',
          value: 'id',
          children: 'childs'
        },
        totalChargingElec:0,
        totalOrderAmount:0,
        totalOrderCount:0,
        totalRefundAmount:0,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000*7)
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1)
              picker.$emit('pick', [start.format('yyyy-MM-dd hh:mm:ss'), end.format('yyyy-MM-dd hh:mm:ss')])
            }
          },{
            text: '本月',
            onClick(picker) {
              const start = new Date(nowYear, nowMonth, 1)
              const end = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1)
              picker.$emit('pick', [start.format('yyyy-MM-dd hh:mm:ss'), end.format('yyyy-MM-dd hh:mm:ss')])
            }
          }, {
            text: '上个月',
            onClick(picker) {
              const end =  new Date(new Date(new Date(nowYear, nowMonth, 0)).getTime()+24*60*60*1000-1)
              const start = new Date(nowYear, nowMonth-1, 1)
              picker.$emit('pick', [start.format('yyyy-MM-dd hh:mm:ss'), end.format('yyyy-MM-dd hh:mm:ss')])
            }
          }, {
            text: '上上月',
            onClick(picker) {
              const end =  new Date(new Date(new Date(nowYear, nowMonth-1, 0)).getTime()+24*60*60*1000-1)
              const start = new Date(nowYear, nowMonth-2, 1)
              picker.$emit('pick', [start.format('yyyy-MM-dd hh:mm:ss'), end.format('yyyy-MM-dd hh:mm:ss')])
            }
          }]
        }
      }
    },

    mounted () {
      this.getAreaList()
      this.getDataList(this.page,this.formData)
    },

    methods: {
      // 获取数据列表
      getDataList (page, params) {
        console.log(params)
        if(params.createDate==null || params.createDate.length==0){
          this.$message.error('日期不能为空')
          return
        } else {
           let start_date = new Date(params.createDate[0].replace(/-/g, "/"))
           let end_date = new Date(params.createDate[1].replace(/-/g, "/"))
           if(start_date.getYear() != end_date.getYear()) {
             this.$message.error('仅支持查询单月，不支持跨年/跨月查询')
             return false
           }
           if(start_date.getMonth() != end_date.getMonth()) {
             this.$message.error('仅支持查询单月，不支持跨年/跨月查询')
             return false
           }
        }
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/order/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              params
            )
          )
        }).then(({ data }) => {
          console.log(data)
          this.dataList = data.data.orderList.records
          this.page.total = data.data.orderList.total
          this.totalOrderAmount=data.data.totalOrderAmount
          this.totalChargingElec=data.data.totalChargingElec
          this.totalOrderCount=data.data.totalOrderCount
          this.totalRefundAmount=data.data.totalRefundAmount
          this.dataListLoading = false
        })
      },


      getAreaList () {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/system/get/all/region'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.options = data.data
        })
      },

      // 条件查询
      searchChange () {
        console.log(this.formData)
        if(this.formData.createDate&&this.formData.createDate.length > 0) {
          this.formData.chargingStartTime = this.formData.createDate[0]
          this.formData.chargingEndTime = this.formData.createDate[1]
        }
        else {
          this.formData.chargingStartTime = ''
          this.formData.chargingEndTime = ''
        }
        this.page.currentPage=1
        this.getDataList(this.page, this.formData)
      },

      power_Click (orderNumber) {
        this.showPowerDiagram = true
        this.$nextTick(() => {
          this.$refs['powerDiagram'].init(orderNumber)
        })
      },
      showChargingRule_click(obj){
        this.showChargingRuleDetail = true
        console.log(obj,"计费规则")
        if(!obj){
          return
        }
        this.$nextTick(() => {
          this.$refs['chargingRuleDetail'].init(obj)
        })
      },
      sizeChange(val){
        this.page.pageSize=val
        this.getDataList(this.page, this.formData)
      },
      currentChange(val){
        this.page.currentPage=val
        this.getDataList(this.page, this.formData)
      },
      refund_Click(row){
        this.$refs['orderRefund'].init(row)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cell{
    text-align: left;
  }
  .el-input{
    width: 200px;
  }
  .sumary-list{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    div{
      height: 30px;
      padding: 0px 12px;
      line-height: 30px;
      border:solid 1px #009FF1;
      border-radius: 15px;
      margin-right: 10px;
    }
    div:hover{
      color: white;
      background-color: #009FF1;
    }
  }
</style>
